<template>
  <div>
    <Vue3DraggableResizable
      :initW="initW"
      :initH="initH"
      v-model:x="data.x"
      v-model:y="data.y"
      v-model:w="data.w"
      v-model:h="data.h"
      :active="data.active"
      :draggable="true"
      v-show="data.active"
      :resizable="true"
      :lockAspectRatio="true"
    >
      <video
        ref="localVideoRef"
        style="width: 100%; height: 100%; cursor: move; object-fit: fill; "
        autoplay
        muted
        playsinline
      >
        摄像头
      </video>
    </Vue3DraggableResizable>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'

export default defineComponent({
  inheritAttrs: false,
  data() {
    return {
      initW: 0,
      initH: 0,
      data: {
        x: 650,
        y: 450,
        h: 100,
        w: 100,
        active: false,
        element: null,
      },
    }
  },
  mounted() {},
  methods: {
    OpenDisplayMedia() {
      // 屏幕共享
      var _this = this
      this.data.x = 100
      this.data.y =100
      const localDisplayMediaRef = this.$refs.localVideoRef

      try {
        navigator.mediaDevices.getDisplayMedia({ video: true }).then(function (stream) {
          var streamInfo = stream.getVideoTracks()[0].getSettings()
          _this.data.w = 1152
          _this.data.h = streamInfo.height / (streamInfo.width / _this.data.w)
          _this.data.active = true
          localDisplayMediaRef.srcObject = stream
          _this.data.element = localDisplayMediaRef
        })
      } catch (e) {
        MessagePlugin.closeAll()
        MessagePlugin.error('屏幕分享失败')
      }
    },
    OpenCameraVideo(deviceId: string) {
      // 打开摄像头
      var _this = this

      const localCameraVideoRef = this.$refs.localVideoRef

      try {
        navigator.mediaDevices.getUserMedia({ video: { deviceId: deviceId } }).then(function (stream) {
          var cameraInfo = stream.getVideoTracks()[0].getSettings()
          _this.data.w = 300
          _this.data.h = cameraInfo.height / (cameraInfo.width / _this.data.w)
          _this.data.active = true
          localCameraVideoRef.srcObject = stream
          _this.data.element = localCameraVideoRef
        })
      } catch (e) {
        MessagePlugin.closeAll()
        MessagePlugin.error('打开摄像头失败')
      }
      this.visible = false
    },
  },
})
</script>
<style scoped></style>
